<template>

  <a-form :form="form">
    <a-form-item
      label="二维码"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
      extra="最多上传10张"
    >
      <SelectImage
        multiple
        :maxNum="10"
        :defaultList="record.imageList"
        v-decorator="['imageIds', {rules: [{required: true, message: '请至少上传1张图片'}]}]"
      />
    </a-form-item>
    <a-form-item label="内容" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-input
        @input='handleInputText'
        v-decorator="['text']"
      />
    </a-form-item>
    <a-divider orientation="left">样式</a-divider>
    <a-form-item label="定位类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group  v-decorator="['type', {initialValue: record.type, }]" button-style="solid" @change='handleChangePositionType'>
        <a-radio-button :value="10">浮窗</a-radio-button>
        <a-radio-button :value="20">内部</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-radio-group  v-decorator="['position', {initialValue: record.position, }]"
                      @change='handleChangePosition'
                      button-style="solid" >
        <a-radio-button :value="10">上边</a-radio-button>
        <a-radio-button :value="20" v-if='record.type === 10'>左边</a-radio-button>
        <a-radio-button :value="30">下边</a-radio-button>
        <a-radio-button :value="40" v-if='record.type === 10'>右边</a-radio-button>
      </a-radio-group>
    </a-form-item>
    <a-form-item label='位置调整' v-if='record.type === 10' :labelCol='labelCol' :wrapperCol='wrapperCol'>
      <a-slider
        @change="handleChangePositionValue" v-decorator="['value', {initialValue: record.value, }]" />
    </a-form-item>
    <a-form-item label='大小调整'  :labelCol='labelCol' :wrapperCol='wrapperCol'>
      <a-slider
        @change="handleChangePositionSize" v-decorator="['size', {initialValue: record.size, }]" />
    </a-form-item>
    <a-icon style='display: none' id='qrImg' type="qrcode" />
  </a-form>
</template>

<script>
import adActionType from '@/common/enum/adActionType'
import { SelectImage } from '@/components'
export default {
  name: 'teacherQrCode',
  props:['ad'],
  components:{SelectImage},
  data(){
    return {
      // 标签布局属性
      labelCol: { span: 3 },
      // 输入框布局属性
      wrapperCol: { span: 10 },
      form: this.$form.createForm(this),
      // 当前记录
      record: {
        tpl_id:adActionType.TEACHER_QR_CODE.value,
        type:10,
        position:10,
        value:50,
        size:0,
        text:'',
        images:[],
      }
    }
  },

  mounted(){
    this.$emit('competed')
    this.createAdBox()
  },

  methods:{
    handleChangePositionType(e){
      this.record.type=e.target.value
      const position=this.form.getFieldValue('position')
      if(this.record.type === 20 && (position === 20 || position === 40)){
        this.form.setFieldsValue({ position: 10 })
        this.record.position = 10
      }
      this.createAdBox()
    },
    handleChangePosition(e){
      this.record.position=e.target.value
      this.createAdBox()
    },
    handleChangePositionValue(val){
      this.record.value = val
      this.createAdBox()
    },
    handleChangePositionSize(val){
      this.record.size = val
      this.createAdBox()
    },
    createAdBox(){
      this.ad.setParams(this.record).createDiv()
    },
    setFormData(data) {
      this.record = Object.assign(this.record,data,{tpl_id:adActionType.TEACHER_QR_CODE.value})
      const { form: { setFieldsValue } } = this
      this.createAdBox()
      // 设置表单内容
      this.$nextTick(() => {
        const d = _.pick(this.record, ['type', 'position','value','text','size'])
        setFieldsValue(d)
      })
    },
    getFormData() {
      return new Promise((resolve) => {
        const { form: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            resolve(values)
          }
        })
      })
    },
    handleInputText(e){
      this.record.text=e.target.value
      this.createAdBox()
    },
  },
}
</script>

<style scoped>

</style>